<template>
  <el-card>
    <h1>购物车</h1>
    <el-divider></el-divider>
    <!-- <h3>商品总数: {{$store.getters.cartGoodsCount}}</h3>
    <h3>商品总价: {{$store.getters.cartGoodsPrice}}</h3> -->
    <h3>商品总数: {{cartGoodsCount}}</h3>
    <h3>商品总价: {{cartGoodsPrice}}</h3>
    <!-- <el-table :data="$store.state.cartList"> -->
    <el-table :data="cartList">
      <el-table-column prop="id" label="序号" min-width="80"></el-table-column>
      <el-table-column
        prop="goodsname"
        label="商品名称"
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="price"
        label="商品价格"
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="num"
        label="商品数量"
        min-width="180"
      ></el-table-column>
      <el-table-column label="操作" min-width="180">
        <template v-slot="props">
          <el-button @click="cartDel(props.$index)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import {mapState,mapGetters,mapMutations} from 'vuex';
export default {
  computed:{
    ...mapState(['cartList']),
    ...mapGetters(['cartGoodsPrice','cartGoodsCount'])
  },
  methods:{
    ...mapMutations(['cartRemove']),
    cartDel(index){
      // 通过this.$store.commit()触发cartRemove()
      // this.$store.commit('cartRemove',index);
      this.cartRemove(index);
    }
  }
};
</script>

<style>
</style>